
import { shallowEqual, useSelector } from "react-redux";
import { Link, useNavigate } from "react-router-dom";

function Home() {
  const {user} = useSelector(state => ({
    user: state.user
  }), shallowEqual)
  const navigate = useNavigate()
  const template = ()=>{
    if(user.name !== '') return (
      <>
        <h2>{user.name}</h2>
        <p>{user.role}</p>
        <button onClick={navigateToUserCenter}>个人中心</button>
      </>
    )
    else return (
    <div >
      <Link to="/login" className=" text-blue-700 font-bold mr-4 underline">Login</Link>
      <Link to="/register"  className=" text-blue-700 font-bold mr-4 underline" >Register</Link>
   </div> 
    )
  }
  function navigateToUserCenter(){
    navigate('/userCenter')
  }
  return (
    <>
     <div className='font-bold text-lg mt-10 mb-3'>This is home page</div>   
    {
      template()
    }
    </>
  );
}

export default Home;
